<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        小米官网 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站
    </title>
    <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持."
    />
    <meta name="keywords" content="小米,redmi,小米10,Redmi K30,小米MIX Alpha,小米商城" />
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css"><!--不要用错了,css文件用link,js 用script src-->
</head>

<body>
    <div class="nav">
        <a href="nav.html" target="_blank" class="top">小米的粉丝</a>
    </div>
    <div class="nav-top clearfix">
        <div class="nav-ce">
            <div class="nav-le">
                <a href="fenye2.html">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a href="">IoT</a>
                <span>|</span>
                <a href="">云服务</a>
                <span>|</span>
                <a href="">金融</a>
                <span>|</span>
                <a href="">有品</a>
                <span>|</span>
                <a href="fada1.html">小米开发平台</a>
                <span>|</span>
                <a href="">企业团购物</a>
                <span>|</span>
                <a href="">资格证照</a>
                <span>|</span>
                <a href="">协议规则</a>
                <span>|</span>
                <a href="">下载app</a>
                <span>|</span>
                <a href="">Select Location</a>
            </div>
            <div class="nav-ri">
                <a href="logo.html" target="_blank"  class="first">登入</a>
                <span>|</span>
                <a href="logo.html">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
                <a href="cart.html" class="last"> 
                    <i class="iconfont icon-gouwuche1
                             "></i>
                    购物车 (0)</a>
                <div class="box-gw">购物车中没有商品,赶紧选购吧!</div>
            </div>
        </div>
    </div>
   
  
    <!--nav-se-->
    <div class="nav-se clearfix"> 
      <div class="nav-ce"> 
        <a href="" class="" id="we">
            <img src="../images/mi-logo.jpg" alt="">
        </a>
         <div class="header-nav">
                <!-- <a href="#">小米手机</a>
               -->
                <!-- <div class="box-se"> -->
                        <!-- <li>
                                <img src='asksa' alt="">
                               <h6>xiao</h6> 
                                <i>1</i>
                            </li>` -->
            <!-- </div> -->
          </div>

         <div class="ser">
            <input type="" name=""  placeholder="小米9 Pro5G Redmi Note8 ">
              <!-- <div class="ser-div">
                    <a href="">小米9 Pro5G</a>
                    <a href="">Redmi Note8</a>
               </div> -->
         </div>
         <a class="se-ri" href="#">
             <i  class="iconfont icon-fangdajing"></i>
         </a>
    </div>
    </div>
   
    <div class="banner container">
        <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/458d13a2ee1ff6c206eff0b987b0bec3.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/>
                    </div>
                    <div class="swiper-slide">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/>
                    </div>
                    <div class="swiper-slide">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/>
                    </div>
                    <div class="swiper-slide">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dcb09c80c58dc9d71623c925739a3733.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/>
                    </div>
               </div>
                <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </div>
           


    <!--home-hero-->
    <div class="home-hero">
       <ul class="sixl">
         
            <!-- <li  id='one'><a href="">

            </a>
        </li>
            <li id='one'><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li> -->
       </ul>
       <ul class="xrw">
            <!-- <li>
                    <img src="../images/shouji2.jpg" alt="">
                </li>
                <li>
                    <img src="../images/shouji3.jpg" alt="">
                </li>
                <li>
                    <img src="../images/shouji4.jpg" alt="">
                </li> -->
       </ul>
       
    </div>


    <!--游戏-->
    <div class='game'>
        <img src="../images/game.jpg" alt="">
    </div>

    <div class="box-hd">
        <h2>手机</h2>
     <div class="more">
         <a href="">
             查看全部
             <i class="iconfont "></i>
        </a>
    </div>  
    </div>
   <!--游戏下的手机-->
   <div class="box-bd-se"> 
        <div class="box-img">
            <img src= "../images/bigph.jpg" alt="">
        </div>
        <div class="boxli">
            <!-- <li>
                    <img src="../images/ph.jpg" alt="">
                    <h3>小米10</h3>
                    <p class="desc">晓龙865/1亿像素相机</p>
                    <p class="price">3999元起</p>
            </li> -->
           
        </div>
   </div>
   <div style="clear:both"></div>
   <div class="home-banner-box">
        <img src="../images/mitv.jpg" alt="">
   </div>

   <script>
        var mySwiper = new Swiper ('.swiper-container', {
    //direction: 'vertical', // 垂直切换选项    
    //自动录播
    autoplay:{
        deplay:1000,
    },
   loop: true, // 循环模式选项
   
   // 如果需要分页器
   pagination: {
     el: '.swiper-pagination',
   },
   
   // 如果需要前进后退按钮
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
   
   // 如果需要滚动条
//    scrollbar: {
//      el: '.swiper-scrollbar',
//    },
 })        
 </script>    

   <!--本地模拟json文件,通过jq中的$.ajax({}),josn文件放在lib中-->
  
   <script>
       //渲染数据
        getList()
        function getList(){
            $.ajax({
                url:'../lib/nav_top.json',//路径千万不要写错了
                dataType:'json',
                success:function(res){
                    // console.log(res);
                    //1.准备一个空字符串
                        let str='';
                    // 2.进行拼接  
                    res.forEach(item=>{
                        str+=`<a href="#" class='za'>${item.name}</a>`;
                        // console.log(item);
                        // console.log(item.list.list_name);//undefied
                    }) 
               
                  
                    //3.数据渲染页面上
                    $('.header-nav').html(str+"<div class='box-se'></div>").on({//一定要中写法
                        mouesenter:()=>$('.header-nav>.box-se').stop().slideDown(),
                        mouseleave:()=>$('.header-nav>.box-se').stop().slideUp(),
                    })
                    .children('.za')
                    .on('mouseover',function(){
                        //获取自己当前的索引
                        const index=$(this).index()
                        //找到要渲染的数组
                        // console.log(res);
                        const list=res[index].list;
                        //找到.box_sev位置渲染
                        let str2='';
                        //console.log(res);//第一级所有的数组
                        // console.log(list);//第二级所有的数组
                        //进行组装
                        list.forEach(item=>{
                            str2+=`<li>
                          <img src='${item.list_url}' alt="">
                          <h6>${item.list_name}</h6> 
                            <i>${item.list_price}</i>
                         </li>`;
                        //  console.log(list);//数组
                        //  console.log(item);//对象
                        //  console.log(list);
                        //  console.log(item.list_name);
                        })
                        //填充到也里面
                        $('.box-se').html(str2)



                    })//找到所有一级菜单的a
                    
                    //给box-添加一个引入出
                    $('.box-se>a')
                    .on({ 
                        mouseenter:function(){
                            $(this).finish.show()},
                            mouseenter:function(){
                            $(this).finish.hide()
                        }
                    })
                   
                }
            })
        }

        //发送一个ajax请求
        getList2()
        function getList2(){
        
            $.ajax({
                url:'../lib/mi.json',//路径千万不要写错了
                dataType:'json',
                success:function(res1){
                   
                    // console.log(res1.id);
                    //1.准备一个空字符串
                        let str='';
                    // 2.进行拼接  
                    
                res1.forEach((item,index)=>{////参数：value数组中的当前项, index当前项的索引, array原始数组；
                    if(index<6){
                        str+=` <li id='one'><a href="">
                        <img src='${item.lis}'/><br/>
                          ${item.title}
                        </a></li>`;     
                        }       
                     })     
                  //填充到也里面
                  $('.sixl').html(str);

                  
                  
                  let  str3='';
                 res1.forEach((item,index)=>{////参数：value数组中的当前项, index当前项的索引, array原始数组；
                    console.log(res1);
                   
                    if(index>=6&index<=8){
                        str3+=` <li>
                    <img src="${item.img}" alt="">
                </li>`;     
                        }      
                     })     
                            //填充到也里面
                  $('.xrw').html(str3); 
               



            }      
    })
        }
        //body发送一个ajax请求,然后把它渲染在页面上
        getList3()
        function  getList3(){
            $.ajax({
                url:'../lib/span.json',
                dataType:'json',
                success:function(res1){
                    var str='';
                res1.forEach(item=>{               
                         str+=`  <li>
                            <img src="${item.lis}" alt=""/>
                            <h3>${item.title}</h3>
                            <p class="desc">${item.h}</p>
                            <p class="price">${item.ti}</p>
                    </li>`;              
                    })     
                  //填充到也里面
                  $('.boxli').html(str);
              }      
            })
        }
   </script>
</body>

</html>